@keyframes mloading {
    0% {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

.m-loadmore {
    width: 65%;
    margin: 15px auto;
    line-height: 15px;
    font-size: 14px;
    text-align: center;

    .m-loading__icon {
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        -webkit-animation: mloading 1s steps(12, end) infinite;
        animation: mloading 1s steps(12, end) infinite;
        background: transparent url() no-repeat;
        background-size: 100%;
    }
}

.m-loadmore__tips {
    font-size: 13px;
    display: inline-block;
    vertical-align: middle;
    color: #666;
}

.m-loadmore_line {
    border-top: 1PX solid #E5E5E5;
    margin-top: 2.4em;

    .m-loadmore__tips {
        position: relative;
        top: -0.75em;
        padding: 0 .6em;
        background-color: @body-bg;
        color: #999;
    }
}

.m-loadmore_dot {
    .m-loadmore__tips {
        padding: 0 .16em;

        &:before {
            content: " ";
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background-color: #E5E5E5;
            display: inline-block;
            position: relative;
            vertical-align: 0;
            top: -0.16em;
        }
    }
}

//- 参考：jquery-weui（http://jqweui.com/components#loadmore）
// <div class="m-loadmore">
//   <i class="m-loading__icon"></i>
//   <span class="m-loadmore__tips">正在加载</span>
// </div>
// <div class="m-loadmore m-loadmore_line">
//   <span class="m-loadmore__tips">暂无数据</span>
// </div>
// <div class="m-loadmore m-loadmore_line m-loadmore_dot">
//   <span class="m-loadmore__tips"></span>
// </div>